<template>
	<view class="gui-flex gui-rows gui-wrap gui-space-between">
		<view class="gui-product" hover-class="gui-tap" v-for="(item, index) in products" :key="index"
			:style="{
			width  : (375 - margin*2)+'rpx',
			marginLeft  : margin+'rpx',
			marginRight : margin+'rpx'}">
			<view>
				<gui-image :src="item.avatar_pic" :width="(375 - margin*2)" :height="imgHeight" @tap="gotoInfo(index, item)" ></gui-image>

				<gui-tags text="忙碌" bgClass="gui-bg-red" :size="22" :width="100"
					style="margin-top:-46%;position: absolute;z-index: 100;" v-if="item.is_busy==1"></gui-tags>

				<gui-tags text="空闲" bgClass="gui-bg-green" :size="22" :width="100"
					style="margin-top:-46%;position: absolute;z-index: 100;" v-if="item.is_busy==0"></gui-tags>

			</view>

			<view class="gui-product-lines gui-flex" style="height: 50rpx;">
				<text class="gui-product-name gui-h6 gui-grids-icon gui-icons"
					style="text-align: left;" @tap="gotoInfo(index, item)" >{{item.nickname}}</text>
				<text class="gui-grids-icon gui-icons gui-h6" style="color: red;margin-top: -5%;text-align: right;"
					@tap="collect_teacher(item.id)" v-if="item.is_follow==0">&#xe6ad;</text>
				<text class="gui-grids-icon gui-icons gui-h6" style="color: red;margin-top: -5%;text-align: right;"
					@tap="collect_teacher(item.id)" v-if="item.is_follow==1">&#xe605;</text>
				<!-- <text class="gui-grids-icon gui-icons">&#xe605;</text> -->
			</view>


			<view class="gui-product-lines gui-flex gui-rows gui-nowrap gui-align-items-center" @tap="gotoInfo(index, item)"  v-if="item.money > 0">
				<text class="gui-color-red gui-text-small">￥</text>
				<text class="gui-h6 gui-color-red">{{item.money}}元</text>


				<!-- <text class="gui-text-small gui-color-gray gui-price-margin">{{item.selledNum}}人购买</text> -->
			</view>

			<text class="gui-text-small gui-color-gray  gui-price-margin" v-if="item.early_use_time !=''" @tap="gotoInfo(index, item)" >最早可约{{item.early_use_time}}</text>

			<view>
				<gui-star activecolor="#FF0036" :totalstars="item.star" :starnum="item.star" :cantap="false"></gui-star>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "gui-product-list-index",
		props: {
			products: {
				type: Array,
				default: function() {
					return [];
				}
			},
			margin: {
				type: Number,
				default: 15
			},
			imgHeight: {
				type: Number,
				default: 345
			},
		},
		
		methods: {
			
			gotoInfo: function(idx, item) {
				uni.navigateTo({
					url: '/pages/coach/details?id=' + item.id
				})
			},
			collect_teacher(id) {
				console.log('son',id);
				this.$emit('collect_teacher', id);
			}
		}
	}
</script>
<style>
	.gui-product {
		margin-bottom: 38rpx;
	}

	.gui-product-lines {
		margin-top: 10rpx;
	}

	.gui-product-name {
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.gui-price-margin {
		margin: 0 10rpx;
	}
</style>